<template>
    <div>
        <h1> onUnmounted 用于在组件卸载或销毁前执行的清理操作 </h1>
        <p>常见的应用场景包括移除事件监听器、清除计时器或取消订阅等，以防止内存泄漏或意外的行为。</p>
        <div class="group">
            <h4>1、清除定时器</h4>
            <p>时间过去了 {{ timeElapsed }} 秒</p>
        </div>

        <div class="group">
            <h4>2、移除事件监听 </h4>
            <p>调整窗口大小并检查控制台中是否有消息</p>
        </div>

        <div class="group">
            <h4>3、取消网络请求</h4>
            <p>数据：{{ data }}</p>
        </div>

        <div class="group">
            <h4>4、关闭 WebSocket 连接 </h4>
            <p>WebSocket 状态：{{ status }}</p>
        </div>

    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import axios from 'axios'

const timeElapsed = ref(0)
let timer = null
const data = ref(null)
let cancelTokenSource = null

// onMounted(() => {
//     timer = setInterval(() => {
//         timeElapsed.value++
//     }, 1000);
// })

// onUnmounted(() => {
//     clearInterval(timer)
// })
// 场景说明：在onMounted 中启动一个每秒更新一次计时器，当组件销毁时，onUnmounted 清除该计时器，避免他在组件卸载后继续运行。


const handleResize = () => {
    console.log('窗口大小：', window.innerWidth, window.innerHeight);
}

// onMounted(() => {
//     window.addEventListener('resize', handleResize)
// })

// onUnmounted(() => {
//     window.removeEventListener('resize', handleResize)
//     console.log('onUnmounted: 移除了监听器',);
// })
// 场景说明：在组件挂载时，onMounted 注册了一个全局的窗口 resize 事件监听器，监听窗口大小的变化，并在控制台打印宽高信息。onUnmounted保证在组件销毁时移除监听器，防止不必要的全局事件绑定。


// onMounted(() => {
//     // 创建 Axios 取消令牌
//     cancelTokenSource = axios.CancelToken.source()

//     axios.get('https://jsonplaceholder.typicode.com/posts/1', {
//         cancelToken: cancelTokenSource.token
//     }).then(response => {
//         data.value = response.data
//     }).catch(error => {
//         if (axios.isCancel(error)) {
//             console.log('请求取消：', error.message);

//         }
//     })
// })

// onUnmounted(() => {
//     // 组件卸载时取消请求
//     if (cancelTokenSource) {
//         cancelTokenSource.cancel('请求被取消，因为组件已卸载')
//     }
// })
// 场景说明：在组件卸载时，取消正在进行的网络请求，避免请求完成后试图更新已销毁的组件状态，导致潜在的内存泄露或异常。

const status = ref('连接一下服务器')
let socket = null

onMounted(() => {
    // 创建 WebSocket 连接
    socket = new WebSocket('ws://1.15.128.171:8989/ws/test')

    socket.onopen = () => {
        status.value = 'Connected 连接成功'
        console.log('连接成功');
    }

    socket.onclose = () => {
        status.value = 'Disconnected 连接失败'
        console.log('连接失败');
    }

    socket.onerror = (error) => {
        console.error('WebSocket 错误：', error);
    }

})

onUnmounted(() => {
    // 组件关闭时 关闭 WebSocket 连接
    if (socket) {
        socket.close()
    }
})
// 场景说明：该组件在 onMounted 时连接到一个 WebSocket服务器，并在 onUnmounted 时关闭连接，确保在组件销毁后不会继续维持无效的连接。


</script>

<style lang="scss" scoped>
h1 {
    margin-left: 20px;
    margin-top: 20px;
}

.group {
    border: 3px solid deepskyblue;
    margin: 20px;
    padding: 10px;
}
</style>